<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="never" class="mb20">
          <div slot="header">我的工作(流程)</div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="我的发起" name="first">
              <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                row-key="id"
                border
                stripe
                fit
                highlight-current-row
              >
                <el-table-column
                  prop="processInstanceName"
                  label="标题"
                  min-width="200"
                  align="center"
                ></el-table-column>
                <el-table-column prop="taskName" label="节点" min-width="200" align="center"></el-table-column>
                <el-table-column align="center" label="操作时间" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ scope.row.startTime | moment('YYYY-MM-DD HH:mm:ss') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="80" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      circle
                      icon="el-icon-view"
                      title="查看"
                      @click="handleView(scope.row)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="listQuery.pageNo"
                :limit.sync="listQuery.pageSize"
                @pagination="queryStartProcess"
              />
            </el-tab-pane>
            <el-tab-pane label="我的待办" name="second">
              <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                row-key="id"
                border
                stripe
                fit
                highlight-current-row
              >
                <el-table-column prop="processName" label="标题" min-width="200" align="center"></el-table-column>
                <el-table-column prop="taskName" label="节点" min-width="200" align="center"></el-table-column>
                <el-table-column align="center" label="操作时间" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime | moment('YYYY-MM-DD HH:mm:ss') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="80" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      circle
                      icon="el-icon-edit"
                      title="处理"
                      @click="handleStart(scope.row)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="listQuery.pageNo"
                :limit.sync="listQuery.pageSize"
                @pagination="queryPersonalTask"
              />
            </el-tab-pane>
            <el-tab-pane label="我的参与" name="third">
              <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                row-key="id"
                border
                stripe
                fit
                highlight-current-row
              >
                <el-table-column prop="processName" label="标题" min-width="200" align="center"></el-table-column>
                <el-table-column prop="taskName" label="节点" min-width="200" align="center"></el-table-column>
                <el-table-column align="center" label="操作时间" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime | moment('YYYY-MM-DD HH:mm:ss') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="80" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      circle
                      icon="el-icon-view"
                      title="查看"
                      @click="handleView(scope.row)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="listQuery.pageNo"
                :limit.sync="listQuery.pageSize"
                @pagination="queryPartakeTask"
              />
            </el-tab-pane>
            <el-tab-pane label="转发通知" name="fourth">
              <el-card shadow="never" class="mb20">
                <el-row>
                  <el-col>
                    <label class="radio-label">是否已读：</label>
                    <el-radio-group v-model="listQuery.notifyStatus" @change="handleFilter">
                      <el-radio label>全部</el-radio>
                      <el-radio label="UNREAD">未读</el-radio>
                      <el-radio label="READED">已读</el-radio>
                    </el-radio-group>
                    <el-button
                      class="filter-item"
                      type="primary"
                      icon="el-icon-search"
                      style="margin-left: 15px;"
                      @click="handleFilter"
                    ></el-button>
                  </el-col>
                </el-row>
              </el-card>
              <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                row-key="id"
                border
                stripe
                fit
                highlight-current-row
              >
                <el-table-column prop="proInsName" label="相关流程" min-width="220" align="center"></el-table-column>
                <el-table-column prop="processStatus" label="流程状态" min-width="100" align="center">
                  <template
                    slot-scope="scope"
                  >{{ scope.row.processStatus | WORKFLOW_PROCESS_STATUS }}</template>
                </el-table-column>
                <el-table-column prop="startUserName" label="转发人" min-width="120" align="center"></el-table-column>
                <el-table-column prop="notifyStatus" label="是否已读" min-width="100" align="center">
                  <template slot-scope="scope">{{ scope.row.notifyStatus | WORKFLOW_NOTIFY_STATUS}}</template>
                </el-table-column>
                <el-table-column align="center" label="转发时间" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime | moment('YYYY-MM-DD HH:mm:ss') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="80" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      circle
                      icon="el-icon-view"
                      title="查看"
                      @click="handleView(scope.row, true)"
                    ></el-button>
                    <el-button
                      v-if="Object.keys(WORKFLOW_NOTIFY_STATUS)[1] === scope.row.notifyStatus"
                      type="primary"
                      size="mini"
                      circle
                      icon="el-icon-check"
                      title="标记为已读"
                      @click="handleReaded(scope.row)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="listQuery.pageNo"
                :limit.sync="listQuery.pageSize"
                @pagination="queryNotifyProcess"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <div slot="header">预警</div>
          <el-tabs v-model="prewarningName" @tab-click="handlePrewarningClick">
            <el-tab-pane label="待办" name="preOne"></el-tab-pane>
            <el-tab-pane label="已办" name="preTwo"></el-tab-pane>
          </el-tabs>
          <e-table
            ref="eTable"
            :tableData="preData"
            :columns="preCol"
            :loading="preLoading"
            :pageObj="null"
            :border="null"
          />
        </el-card>
      </el-col>
      <el-col>
        <el-card shadow="never">
          <div slot="header">我的考评</div>
          <el-tabs v-model="evalName" @tab-click="handleEvalClick">
            <el-tab-pane label="综合考评" name="evalOne"></el-tab-pane>
            <el-tab-pane label="医德医风" name="evalTwo"></el-tab-pane>
            <el-tab-pane label="内部满意度" name="evalThree"></el-tab-pane>
          </el-tabs>
          <e-table
            ref="eTable"
            :tableData="evalData"
            :columns="evalCol"
            :loading="evalLoading"
            :pageObj="null"
            :border="null"
          />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="16" class="flex mb20" style="justify-items: stretch;">
      <el-col :span="8" v-for="(item,index) in hotArticle" :key="index">
        <el-card shadow="never" style="height: 100%">
          <div slot="header">{{ item.categoryName }}</div>
          <ul>
            <li v-for="(ite,ind) in item.list" :key="ind" class="mb20">
              <span class="content-span">{{ ite.contentBrief }}</span>
              <img v-if="ite.savePath" class="flex-image" :src="ite.savePath" alt="示例" />
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProcessPublicity from '@/views/workflow/bpmn/task/components/ProcessPublicity'
import { getCms } from '@/api/system'
import { getWarningHaveDone, getWarningBacklog, getEvaluationList, getDeclareTotal, getInternalList, getMoralityBackLog, getMoralityTotal } from '@/api/monitor'
export default {
  data() {
    return {
      prewarningName: 'preOne',
      preData: [],
      preCol: [],
      preLoading: false,
      evalName: 'evalOne',
      evalData: [],
      evalCol: [],
      evalLoading: false,
      hotArticle: [],
      activeName: 'first'
    }
  },
  async created() {
    const PersonalTask = this.$route.params.PersonalTask
    if (PersonalTask === true) {
      this.activeName = 'second'
    }

    const res = await getCms()
    let arr = []
    if (res.state === '000000') {
      this.hotArticle = [...res.data]
    }

    this.$nextTick(() => {
      this.handleFilter()
    })
  }
}
</script>

<style scoped>
li.mb20 {
  display: flex;
  border-bottom: 1px solid #f1f1f1;
  padding: 8px;
}
.content-span {
  flex: 1;
  max-height: 63px;
  overflow: hidden;
}

.flex-image {
  width: 60px;
  flex: 0 0 auto;
}
</style>